<template>
  <div class="app-container">
    <div>账户ID：{{revenueDetail.ID}}</div>
    <div>账户昵称：{{revenueDetail.fullname}}</div>
    <div>电子邮件：{{revenueDetail.email}}</div>
    <div>电话号码：{{revenueDetail.telephone}}</div>
    <div>账户昵称：{{revenueDetail.fullname}}</div>
    <div>注册时间：{{revenueDetail.createdAt}}</div>
    <div>最后登录：{{revenueDetail.loginTime}}</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="档案" name="detail">
        

      </el-tab-pane>
      <el-tab-pane label="足迹" name="footmark">
    <el-table
      key="footmarkList"
      :data="footmarkList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column label="足迹ID" prop="id" sortable="custom" align="center" width="140">
        <template slot-scope="{row}">
          <span>{{ row.ID}}</span>
          
        </template>
      </el-table-column>
      <el-table-column label="主题" prop="id" sortable="custom" align="center" width="140">
        <template slot-scope="{row}">
          <span>{{ row.username }}-{{row.role.title}}</span>
          
        </template>
      </el-table-column>
      <el-table-column label="设备" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleShow(row)">{{ row.fullname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资源" width="300">
        <template slot-scope="{row}">
            {{ row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="位置" width="300">
        <template slot-scope="{row}">
            {{ row.channel.title }}
        </template>
      </el-table-column>
      <el-table-column label="停留" width="200">
        <template slot-scope="{row}">
            {{ row.loginTime }}
        </template>
      </el-table-column>
      <el-table-column label="发起时间" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status">
            {{ row.status.label }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

      </el-tab-pane>
      <el-tab-pane label="事件" name="incident">
        <el-table
          key="incidentList"
          :data="incidentList"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column label="事件ID" prop="id" sortable="custom" align="center" width="140">
            <template slot-scope="{row}">
              <span>{{ row.ID}}</span>
              
            </template>
          </el-table-column>
          <el-table-column label="主题" prop="id" sortable="custom" align="center" width="140">
            <template slot-scope="{row}">
              <span>{{ row.username }}-{{row.role.title}}</span>
              
            </template>
          </el-table-column>
          <el-table-column label="事件时间" class-name="status-col" width="100">
            <template slot-scope="{row}">
              <el-tag :type="row.status">
                {{ row.status.label }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button v-if="revenueDetail.status.value === 5" type="danger" @click="handleDelete(revenueForm)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import {  getRevenueDetail, removeRevenueByID } from '@/api/finance/revenue'


import waves from '@/directive/waves' // waves directive

import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'revenueDetail',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      activeName:"detail",
      incidentList:[],
      footmarkList:[],
      revenueDetail: {
        identity: undefined,
        remark: '',
        revenue_identity: 0,
        title: '',
        status: {
          value:1
        }
      }
    }
  },
  created() {
    let revenueID = this.$route.query && this.$route.query.revenueID
      revenueID = parseInt(revenueID)
      if (!isNaN(revenueID)) {
        this.listLoading = true
        getRevenueDetail({
          "revenueID":revenueID
        }).then(response => {
          if (response.status === 200) {
            this.revenueDetail = response.data
            this.revenueDetail.password = ''
            console.log(this.revenueForm)
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
  },
  methods: {
    handleCannel() {
      this.$router.push({ path: 'revenue' })
    },
    handleDelete(row, index) {
      removeRevenueByID(row.ID).then(() => {
        this.$notify({
          title: 'Success',
          message: 'Update Successfully',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    }
  }
}
</script>
